<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>红娘详情</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--公共js-->
    <script src="../js/public.js"></script>
    <!--公共css-->
    <link rel="stylesheet" href="../css/pubic.css">
    <!--本页面css-->
    <link rel="stylesheet" href="../css/index.css">
</head>
<body style="background: #f6f6f6">
<div class="redM-D">
    <div class="redM-D-user">
        <img src="../images/5.jpg" alt="">
        <div class="D-user-layer">
            <p>刘平</p>
            <p>搜狐网CEO</p>
            <p>单身团8人</p>
        </div>
    </div>
    <div class="redM-D-Gender">
        <div class="div-active"><p>男生</p></div>
        <div><p>女生</p></div>
    </div>
    <div class="redM-D-list">
        <ul>
            <li>
            <a href="https://www.baidu.com/">
                <div class="list-user">
                    <img src="../images/1.jpg" alt="">
                </div>
                <div class="list-detail">
                    <p class="name">灵活的西瓜2222<i></i></p>
                    <span class="detail">你好，全世界</span>
                    <div class="Label">
                        <span>年薪20万</span> |
                        <span>奥迪A4</span> |
                        <span>166cm</span> |
                        <span>北京两套房</span>
                    </div>
                </div>
            </a>
        </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <p class="name">灵活的西瓜<i></i></p>
                        <span class="detail">你好，全世界</span>
                        <div class="Label">
                            <span>年薪20万</span> |
                            <span>奥迪A4</span> |
                            <span>166cm</span> |
                            <span>北京两套房</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <p class="name">灵活的西瓜<i></i></p>
                        <span class="detail">你好，全世界</span>
                        <div class="Label">
                            <span>年薪20万</span> |
                            <span>奥迪A4</span> |
                            <span>166cm</span> |
                            <span>北京两套房</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <p class="name">灵活的西瓜<i></i></p>
                        <span class="detail">你好，全世界</span>
                        <div class="Label">
                            <span>年薪20万</span> |
                            <span>奥迪A4</span> |
                            <span>166cm</span> |
                            <span>北京两套房</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <p class="name">灵活的西瓜<i></i></p>
                        <span class="detail">你好，全世界</span>
                        <div class="Label">
                            <span>年薪20万</span> |
                            <span>奥迪A4</span> |
                            <span>166cm</span> |
                            <span>北京两套房</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <p class="name">灵活的西瓜<i></i></p>
                        <span class="detail">你好，全世界</span>
                        <div class="Label">
                            <span>年薪20万</span> |
                            <span>奥迪A4</span> |
                            <span>166cm</span> |
                            <span>北京两套房</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <p class="name">灵活的西瓜1111<i></i></p>
                        <span class="detail">你好，全世界</span>
                        <div class="Label">
                            <span>年薪20万</span> |
                            <span>奥迪A4</span> |
                            <span>166cm</span> |
                            <span>北京两套房</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <p class="name">灵活的西瓜<i></i></p>
                        <span class="detail">你好，全世界</span>
                        <div class="Label">
                            <span>年薪20万</span> |
                            <span>奥迪A4</span> |
                            <span>166cm</span> |
                            <span>北京两套房</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <p class="name">灵活的西瓜<i></i></p>
                        <span class="detail">你好，全世界</span>
                        <div class="Label">
                            <span>年薪20万</span> |
                            <span>奥迪A4</span> |
                            <span>166cm</span> |
                            <span>北京两套房</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <p class="name">灵活的西瓜<i></i></p>
                        <span class="detail">你好，全世界</span>
                        <div class="Label">
                            <span>年薪20万</span> |
                            <span>奥迪A4</span> |
                            <span>166cm</span> |
                            <span>北京两套房</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <p class="name">灵活的西瓜<i></i></p>
                        <span class="detail">你好，全世界</span>
                        <div class="Label">
                            <span>年薪20万</span> |
                            <span>奥迪A4</span> |
                            <span>166cm</span> |
                            <span>北京两套房</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://www.baidu.com/">
                    <div class="list-user">
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <div class="list-detail">
                        <p class="name">灵活的西瓜<i></i></p>
                        <span class="detail">你好，全世界</span>
                        <div class="Label">
                            <span>年薪20万</span> |
                            <span>奥迪A4</span> |
                            <span>166cm</span> |
                            <span>北京两套房</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>

<!--jquery.js-->
<script src="../js/jquery-3.0.0.min.js"></script>
<!--引入handlebars渲染模板-->
<script src="../js/handlebars-v4.0.10.js"></script>
<!--接口配置文件-->
<script src="../js/config.js"></script>
<!--引入本页面js-->
<script src="../js/index.js"></script>
<script>
    var Genders=$('.redM-D-Gender div');
    Genders.on('click',function () {
        var index = $(this).index();
        $(this).addClass('div-active').siblings().removeClass('div-active')
        $(this).parents(".redM-D").find('.redM-D-list ul').eq(index).show().siblings().hide()
    })
</script>
</body>
</html>